<!--
 * @Description: 
 * @Version: V1.0.0
 * @Author: 周艳凯 484894717@qq.com
 * @Date: 2024-10-31 10:56:18
 * @LastEditors: 周艳凯 484894717@qq.com
 * @LastEditTime: 2024-11-02 00:14:07
 * @FilePath: index.vue
 * Copyright 2024 Marvin, All Rights Reserved. 
 * 2024-10-31 10:56:18
-->
<template>
  <view class="flex">
    <a-card title="基本使用">
      当前key{{ active }}
      <a-tabs
        v-model:active-key="active"
        :default-active-key="2"
        :animation="true"
      >
        <a-tab-pane v-for="item in 20" :key="item" :title="`Tab${item}`">
          内容{{ item }}
        </a-tab-pane>
      </a-tabs>
    </a-card>
    <a-card title="基本使用">
      <a-space direction="vertical" size="large">
        <a-radio-group v-model="position" type="button">
          <a-radio value="top">Top</a-radio>
          <a-radio value="right">Right</a-radio>
          <a-radio value="bottom">Bottom</a-radio>
          <a-radio value="left">Left</a-radio>
        </a-radio-group>
        <a-tabs v-model:active-key="active" :position="position">
          <a-tab-pane key="1" title="Tab 1">
            Content of Tab Panel 1
          </a-tab-pane>
          <a-tab-pane key="2" title="Tab 2">
            Content of Tab Panel 2
          </a-tab-pane>
          <a-tab-pane key="3" title="Tab 3">
            Content of Tab Panel 3
          </a-tab-pane>
        </a-tabs>
      </a-space>
    </a-card>
    <a-card title="基本使用">
      <a-tabs
        v-model:active-key="active"
        default-active-key="2"
        :animation="true"
      >
        <a-tab-pane key="1" title="Tab 1"> Content of Tab Panel 1 </a-tab-pane>
        <a-tab-pane key="2" title="Tab 2"> Content of Tab Panel 2 </a-tab-pane>
        <a-tab-pane key="3" title="Tab 3" disabled>
          Content of Tab Panel 3
        </a-tab-pane>
        <a-tab-pane key="3" title="Tab 4"> Content of Tab Panel 3 </a-tab-pane>
        <template #extra>
          <a-button>Action</a-button>
        </template>
      </a-tabs>
    </a-card>
  </view>
</template>

<script lang="ts" setup>
import { ref } from "vue";

const active = ref(2);
const position = ref("top");
</script>

<style>
.flex {
  height: 100vh;
  padding: 200rpx 20rpx;
}
:deep(.arco-card) {
  margin-bottom: 30rpx;
}
.boxks {
  width: 200px;
}
</style>
